.box2 {
    position       : relative;
    width          : 300px;
    height         : 300px;
    margin         : 100px auto;
    transition     : all .4s;
    transform-style: preserve-3d;

    &:hover {
        transform: rotateY(180deg)
    }
}

.a1,
.a2 {
    position     : absolute;
    top          : 0;
    left         : 0;
    width        : 100%;
    height       : 100%;
    border-radius: 50%;
    font-size    : 30px;
    text-align   : center;
    line-height  : 300px;
}

.a1 {
    background-color: pink;
    z-index         : 1;
}

.a2 {
    background-color: purple;
    transform       : rotateY(180deg);
}